<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>节点菜单</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <link rel="stylesheet" href="../../../static/kaige/css/iconpick.css">
</head>

<body>
  <div class="kaige-body">
    <table class="layui-table" id="menuTable" lay-filter="menuTable" lay-size="sm"></table>
  </div>

  <script type="text/html" id="TPL-treeTable-header">
    <div class="layui-btn-group">      
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="reload"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="open-all"><i class="layui-icon layui-icon-down"></i> 全展开</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="close-all"><i class="layui-icon layui-icon-right"></i> 全关闭</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="vall"><i class="layui-icon layui-icon-eye"></i> 显示所有</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="vmenu"><i class="layui-icon layui-icon-eye-invisible"></i> 仅显菜单</button>
    </div>
  </script>

  <script type="text/html" id="TPL-treeTable-tdbar">
    <div class="layui-btn-group">
      <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="look"><i class="layui-icon layui-icon-eye"></i></a>
      <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    </div>
  </script>

  <script>
    load_init_js(function () {
      layui.config({
        base: szoa.client.path + '/static/kaige/layuiextend/'
      }).use(['iconpick', 'kaige'], function () {
        var form = layui.form,
          layer = layui.layer,
          table = layui.table,
          element = layui.element,
          $ = layui.$,
          iconpick = layui.iconpick,
          kaige = layui.kaige,
          treeTable = layui.treeTable;
        //图标输出<i>
        window.get_icon = function (a) {
          var b = "";
          a &&
            (-1 < a.indexOf("fa-")
              ? (b = '<i class=\'fa ' + a + '\'></i>')
              : -1 < a.indexOf("icon-")
                ? (b = '<i class=\'iconfont ' + a + '\'></i>')
                : -1 < a.indexOf("layui-icon-")
                  ? (b = '<i class=\'layui-icon ' + a + '\'></i>')
                  : null != a.match(/\//gi) && (b = '<img src=\'' + a + '\' />'));
          return b + " ";
        }
        //获取父节点名称
        function get_pid_name(a, b) { if (a && b) { for (var i = 0; i < a.length; i++) { if (a[i].menu_id == b) { return a[i].name } } } return "" }

        // 渲染表格
        var treeinit = treeTable.render({
          elem: "#menuTable",
          id: "IDmenuTable",
          url: "/sys.menu/menulist",
          toolbar: '#TPL-treeTable-header',
          height: 'full-35',
          where: {
            is_menu: 1
          },
          cols: [[
            { type: 'numbers', title: '序号' }
            , { field: 'mid', title: 'ID', width: 100, hide: true }
            , { field: 'name', title: '名称', width: 320, escape: false }
            , { field: 'node', title: '节点', width: 320, hide: true }
            , { field: 'icon', title: '图标', escape: false, width: 100, templet: function (d) { return get_icon(d.icon); } }
            , { field: 'title', title: '说明', width: 200, hide: true }
            , { field: 'id', title: '菜单ID', width: 200, edit: 'text', hide: true }
            , { field: 'pid', title: '上级ID', width: 200, edit: 'text', hide: true }
            , { field: 'sort', title: '排序', edit: 'text', width: 60, align: "center" }
            , { field: 'params', title: '链接参数', width: 100, hide: true }
            , { field: 'is_menu', title: '菜单', width: 90, align: "center", templet: "#is_menu_td", }
            , { field: 'is_left', title: '左侧', width: 110, align: "center", templet: "#is_left_td", }
            , { field: 'is_extend', title: '默认展开', width: 110, align: "center", templet: "#is_extend_td",}
            , { field: 'is_home_entry', title: '首页快捷', width: 110, align: "center", templet: "#is_home_entry_td",}
            , { field: 'is_lock', title: '锁定', width: 110, align: "center", templet: "#is_lock_td",}
            , { fixed: "right", title: "操作", width: 140, align: "center", toolbar: "#TPL-treeTable-tdbar" }
          ]],
          page: false,
          tree: {
            view: { expandAllDefault: true, showIcon: false }
          },
          done: function () {
            switchListening();
          }
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(menuTable)", function (obj) {
          // 获取选中行
          switch (obj.event) {
            case "reload":
              treeTable.reloadData('IDmenuTable');
              break;
            case "open-all":
              treeTable.expandAll('IDmenuTable', true); // 展开全部节点
              break;
            case "close-all":
              treeTable.expandAll('IDmenuTable', false); // 关闭全部节点
              break;
            case "vall":
              //执行重载数据
              treeTable.reloadData('IDmenuTable', {
                where: {
                  is_menu: 0
                }
              });
              break;
            case "vmenu":
              //执行重载数据
              treeTable.reloadData('IDmenuTable', {
                where: {
                  is_menu: 1
                }
              });
              break;
          }
        });

        // 单元格工具事件--此处是 filter  不是 id
        treeTable.on('tool(menuTable)', function (obj) {
          switch (obj.event) {
            case "look":
              btn_look(obj.data);
              break;
            case "edit":
              btn_edit(obj.data);
              break;
          }
        });

        //监听单元格编辑
        treeTable.on('edit(menuTable)', function (obj) {
          var tr = obj.tr, that = this;
          var arr = ['sort', 'id', 'pid'];
          if (arr.indexOf(obj.field) == -1) return false;
          var updata = {
            'formpage':'menulist',
            'id': obj.data.mid,
            'field': obj.field,
            'value': obj.value
          };
          $.post('/sys.menu/updatefield', updata, function (res) {
            console.log(res);
            layer.tips(res.msg, that, { time: 1000, tips: 1 });
          });
        });

        //编辑
        function btn_edit(d) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
            , url: '/sys.menu/edit' //数据源
            , data: { id: d.mid }
            , id: 'kaige'
            , area: ['800px', '550px']
            , encode: 1
            , overflow: 0
            , callbefore: function (layero, index, res) {
              console.log(res);
              $('.puicon').find('i').addClass(res.data.icon);
              iconpick.pickinit('puicon', 'ipicon');
              //上级菜单
              kaige.xmSelectTree({
                id: 'p_menu_id2',
                url: '/select/menutree',
                udata: { automatch: 1 },
                radio: true,
                clickClose: true,
                lastback: function (dls) {
                  //更新选择框的值--在回调里居然可以用到kaige.js定义的xmSelect变量
                  xmSelect.batch("#p_menu_id2_select_box", "setValue", [
                    { name: res.data.p_menu_id_name, value: res.data.p_menu_id },
                  ]);
                }
              });
            }
          });
        }

        function btn_look(d) {
          kaige.details({
            title: '<i class="layui-icon layui-icon-eye"></i> 查看'
            , url: '/sys.menu/look' //数据源
            , data: { id: d.mid }
            , id: 'look'
            , area: ['500px', '500px']
            , overflow: 0
            , callbefore: function () {

            }
          });
        }

        function switchListening() {
          var arr = ['is_left', 'is_lock', 'is_extend', 'is_home_entry'];
          $(arr).each(function (i, sval) {
            form.on('switch(' + sval + ')', function (data) {
              var that = $(data.elem), id = that.attr('data-id'), old = that.attr('data-old');
              var updata = {
                id: id,
                field: sval,
                value: data.elem.checked ? 1 : 0
              };
              $.post('/sys.menu/updatefield', updata, function (res) {
                layer.tips(res.msg, data.othis, { tips: 2 });
              });
            });
          });
        }

      });
    });
  </script>
  <script type="text/html" id="is_menu_td">
    <span class="layui-badge {{ d.is_menu == 1? 'layui-bg-green': 'layui-bg-gray'}}">{{ d.is_menu == 1 ? '是': '否'}}</span>
  </script>
  <script type="text/html" id="is_left_td">
    <input type="checkbox" name="is_left" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.mid}}" data-old="{{ d.is_left }}" lay-filter="is_left" {{ d.is_left == 1 ? 'checked' : '' }} />
  </script>
  <script type="text/html" id="is_lock_td">
    <input type="checkbox" name="is_lock" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.mid}}" data-old="{{ d.is_lock }}" lay-filter="is_lock" {{ d.is_lock == 1 ? 'checked' : '' }} />
  </script>
  <script type="text/html" id="is_home_entry_td">
    <input type="checkbox" name="is_home_entry" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.mid}}" data-old="{{ d.is_home_entry }}" lay-filter="is_home_entry" {{ d.is_home_entry == 1 ? 'checked' : '' }} />
  </script>
  <script type="text/html" id="is_extend_td">
    <input type="checkbox" name="is_extend" value="1" lay-skin="switch" lay-text="是|否" data-id="{{d.mid}}" data-old="{{ d.is_extend }}" lay-filter="is_extend" {{ d.is_extend == 1 ? 'checked' : '' }} />
  </script>
  <script type="text/html" id="selecttrbar">
    <button type="button" class="layui-btn layui-btn-xs" lay-event="select_pid" title="选择"><i class="fa fa-check"></i></button>
  </script>

  <script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
      <blockquote class="layui-elem-quote layui-text">
        节点是系统自动获取，非开发人员，请不要编辑节点菜单！ <span style="color: red;">禁止修改项请前往[节点获取]中设置</span>
      </blockquote>
      <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-inline" style="width:220px;margin-top: 1px;">
          <div id="p_menu_id2_select_box"></div>
          <input type="hidden" id="p_menu_id2_name" />
          <input type="hidden" id="p_menu_id2" value="{{ d.p_menu_id || '' }}" name="p_menu_id" />
        </div>
        <label class="layui-form-label">图标</label>
        <div class="layui-inline" style="width:220px">
          <input type="hidden" name="icon" autocomplete="off" class="layui-input iconpicker ipicon"  value="{{ d.icon || '' }}" />
          <button type="button" class="layui-btn layui-btn-sm puicon" style="margin-top:3px;margin-left: 5px;"><i></i> 选择图标</button>
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">菜单ID</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="menu_id" required lay-verify="required" autocomplete="off"
            class="layui-input" value="{{ d.menu_id || '' }}" />
        </div>
        <label class="layui-form-label">链接参数</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="params" placeholder="例: name=1&age=20" value="{{ d.params || '' }}" autocomplete="off" class="layui-input" />
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">模块名称</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="name" required lay-verify="required"  value="{{ d.name || '' }}" placeholder="请输入模块名称" autocomplete="off"
            class="layui-input" />
        </div>
        <label class="layui-form-label">打开方式</label>
        <div class="layui-input-inline" style="width:220px">
          <select name="open_type">
            <option value="0" {{ d.open_type < 1 ? "selected" :"" }} >无</option>
            <option value="1" {{ d.open_type == 1 ? "selected" :"" }} >弹窗</option>
            <option value="2" {{ d.open_type == 2 ? "selected" :"" }} >TAB任务栏</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">弹窗宽度</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="width" class="layui-input" placeholder="(500px/80vw/80%)"  value="{{ d.width || '' }}" />
        </div>
        <label class="layui-form-label">弹窗高度</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="height" class="layui-input" placeholder="(500px/80vh/80%)"  value="{{ d.height || '' }}" />
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="number" name="sort" class="layui-input" value="{{ d.sort || '100' }}" />
        </div>
        <label class="layui-form-label">左侧显示</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="is_left" lay-skin="switch" value="{{ d.is_left || '' }}" lay-text="是|否" />
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">模块路由</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="node" autocomplete="off" class="layui-input" value="{{ d.node || '' }}" />
        </div>
        <label class="layui-form-label">是否锁定</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="is_lock" lay-skin="switch" value="1" lay-text="是|否" {{ d.is_lock == 1 ? 'checked' : '' }}/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">首页快捷</label>
        <div class="layui-input-inline" style="width:100px">
          <input type="checkbox" name="is_home_entry" lay-skin="switch" value="1" lay-text="是|否" {{ d.is_home_entry == 1 ? 'checked' : '' }}/>
        </div>
        <div class="layui-form-mid layui-word-aux">首页快捷按钮，选是后下面【徽章格式】才会生效</div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">徽章格式</label>
        <div class="layui-input-block">
          <input type="text" name="badge" value="{{ d.badge || '' }}" placeholder="放空代表不显示." autocomplete="off" class="layui-input"  />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-block">
          <input type="text" name="title" autocomplete="off" class="layui-input" value="{{ d.title || '' }}"/>
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">是否菜单</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="is_menu" disabled lay-skin="switch" value="1" lay-text="是|否" {{ d.is_menu == 1 ? 'checked' : '' }}/>
        </div>
        <label class="layui-form-label">类型</label>
        <div class="layui-input-inline" style="width:220px">
          <select disabled class="layui-disabled" name="type">
            <option value="m" {{ d.type == 'm' ? "selected" :"" }}>模块</option>
            <option value="c" {{ d.type == 'c' ? "selected" :"" }}>控制器</option>
            <option value="a" {{ d.type == 'a' ? "selected" :"" }}>方法</option>
          </select>
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">是否权限</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="is_auth" disabled lay-skin="switch" value="1" lay-text="是|否" {{ d.is_auth == 1 ? 'checked' : '' }}/>
        </div>
        <label class="layui-form-label">标记类别</label>
        <div class="layui-input-inline" style="width:220px">
          <select disabled class="layui-disabled" name="menu_type">
            <option value="0" {{ d.menu_type == 0 ? "selected" :"" }}>无</option>
            <option value="1" {{ d.menu_type == 1 ? "selected" :"" }}>父菜单</option>
            <option value="2" {{ d.menu_type == 2 ? "selected" :"" }}>菜单</option>
            <option value="3" {{ d.menu_type == 3 ? "selected" :"" }}>按钮</option>
            <option value="4" {{ d.menu_type == 4 ? "selected" :"" }}>接口</option>
            <option value="5" {{ d.menu_type == 5 ? "selected" :"" }}>系统</option>
          </select>
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">是否登录</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="is_login" disabled lay-skin="switch" value="1" lay-text="是|否" {{ d.is_login == 1 ? 'checked' : '' }}/>
        </div>
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="checkbox" name="status" disabled lay-skin="switch" value="1" lay-text="启用|禁用" {{ d.status == 1 ? 'checked' : '' }}/>
        </div>
      </div>
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>

  <script type="text/html" id="look_form_html">
    <div class="kaige-body">
      <table class="layui-table">
        <tr>
          <td style="width: 25%;">上级菜单</td>
          <td>{{ d.p_menu_id_name || "无" }}({{ d.p_menu_id || "" }})</td>
        </tr>
        <tr>
          <td>菜单ID</td>
          <td>{{ d.menu_id }}</td>
        </tr>
        <tr>
          <td>图标</td>
          <td>{{- get_icon(d.icon) }}</td>
        </tr>
        <tr>
          <td>模块名称</td>
          <td>{{ d.name }}</td>
        </tr>
        <tr>
          <td>说明</td>
          <td>{{ d.title }}</td>
        </tr>
        <tr>
          <td>模块路由</td>
          <td>{{ d.node }}</td>
        </tr>
        <tr>
          <td>链接参数</td>
          <td>{{ d.params }}</td>
        </tr>
        <tr>
          <td>打开方式</td>
          <td> {{ d.open_type == 1 ? "弹窗" : d.open_type == 2 ? "TAB任务栏" : "无" }}</td>
        </tr>
        <tr>
          <td>标记类别</td>
          <td> {{ d.menu_type == 1 ? "父菜单" : d.menu_type == 2 ? "菜单" : d.menu_type == 3 ? "按钮" : d.menu_type == 4 ? "接口" : d.menu_type == 5 ? "系统" : "无" }}</td>
        </tr>
        <tr>
          <td>弹窗宽度</td>
          <td>{{ d.width }}</td>
        </tr>
        <tr>
          <td>弹窗高度</td>
          <td>{{ d.height }}</td>
        </tr>
        <tr>
          <td>排序</td>
          <td>{{ d.sort }}</td>
        </tr>
        <tr>
          <td>左侧显示</td>
          <td>{{ d.is_left == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>是否锁定</td>
          <td>{{ d.is_lock == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>首页快捷</td>
          <td>{{ d.is_home_entry == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>徽章格式</td>
          <td>{{ d.badge || '' }}</td>
        </tr>
        <tr>
          <td>是否菜单</td>
          <td>{{ d.is_menu == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>是否权限</td>
          <td>{{ d.is_auth == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>是否登录</td>
          <td>{{ d.is_login == 1 ? "是":"否" }}</td>
        </tr>
        <tr>
          <td>状态</td>
          <td>{{ d.status ==1 ? "启用":"禁用" }}</td>
        </tr>
      </table>
    </div>
  </script>
</body>

</html>